import React,{PropTypes,Component,PureComponent}  from 'react';
import { Modal, Button } from 'antd';
import Tablecolumns from './ColumnsKpi';
import { connect } from 'react-redux';

import style from './columnsmodal.less'
const mapDispatchToProps = {
 changeColumns: query => ({
   type: 'fundpool/changeColumns',
   payload: query || {},
 }),
 pdtSelect:query =>({
   type: 'fundpool/pdtSelect',
   payload: query || {},
 })
};

@connect( null,mapDispatchToProps)
class ColumnModal extends PureComponent {
  static propTypes = {
    changeColumns: PropTypes.func.isRequired,
    pdtSelect:PropTypes.func.isRequired,
  }
  state = { visible: false,modalHeight: 0, }
  componentDidUpdate() {
		const screenHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
		const ele = document.querySelector('.set-panel .ant-modal-body');
		if (ele) {
			ele.style.height = `${screenHeight * 0.6}px`;
		}
	}
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = (e) => {
    this.setState({
      visible: false,
    });
  }
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }

  render() {
    const {tableData,filterProduct,Homestatus,GroupStatus} = this.props;
    console.log("columnModal>>>",this.props);
    if(tableData || filterProduct){
      return (
        <div >
          <Button type="primary" onClick={this.showModal} >指标设置</Button>
          <Modal
            className={`${style.columnModal} set-panel`}
            title="指标设置"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
          >
            <Tablecolumns {...this.props}/>
          </Modal>
        </div>
      );
    }else{
      return null
    }

  }
}
export default ColumnModal
